<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #result{
      width:200px;
      height:100px;
      border:solid 1px #90b;
    }
  </style>
</head>
<body>
<button>点击发送请求</button>
<div id="result"></div>
<script>
  const btn = document.querySelector('button');
  const result = document.querySelector('#result');

  btn.addEventListener('click', function () {
    // 创建对象
    const xhr = new XMLHttpRequest();

    // 初始化 设置请求方法和url
    xhr.open('GET', 'http://127.0.0.1:8000/serve?a=100&b=200&c=300')

    // 发送
    xhr.send();

    //事件绑定 处理服务端返回的结果
    // readystate xhr对象中的属性，表示状态 0 1 2 3 4 5
    // change 改变 0 = > 1
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) { //服务端返回了所有结果
        // 判断响应状态码 200 404 403 ...
        // 二开头都是成功
        if(xhr.status >= 200 && xhr.status < 300) {
          // 处理结果 行 头 空行 体
          console.log(xhr.status); // 行里的响应状态码
          console.log(xhr.statusText);// 行里的状态字符串
          console.log(xhr.getAllResponseHeaders()); // 所有响应投
          console.log(xhr.response); // 响应体

          result.innerHTML = xhr.response;
        }
      }
    }
  })
</script>
</body>
</html>